<template>
	<view class="my">
		<block v-if="!mStatus">
			<view class="my_header">
				<view class="header_top">
					<view class="header_logo">
						<view class="logo" :class="{'unsetBo':!logoStatus}">
							<image :src="logoStatus?customer.avatar==''?'/static/other/logo.png':customer.avatar:'/static/my/logo_no.png'"></image>
						</view>
						<view class="grade" v-if="logoStatus">
							<image class="imgBox" :src="customer.levelTag"></image>
						</view>
					</view>
					<view class="header_name">
						<view class="name">
							<block v-if="logoStatus">
								<view class="name_text ellipseHide">{{customer.nickName}}</view>
								<navigator v-if="!customer.isRealName" url="/pages/my/certification/certification"
									hover-class="none" class="real_name">未实名 > </navigator>
							</block>
							<navigator hover-class="none" url="/pages/login/login" class="name_text" v-else>点击登录
							</navigator>
						</view>
						<!-- <block v-if="logoStatus">
							<navigator url="/pages/my/shenye-coin/shenye-coin" hover-class="none" class="shenye-coin">
								<image src="/static/newsImg/shenye_cion.png" mode="widthFix"></image>
								<view>神椰CoCo：{{customer.coin}}
									<image class="h_image_02" src="/static/newsImg/index_next.png" mode="widthFix">
									</image>
								</view>
							</navigator>
						</block> -->
					</view>
					<view class="header_set_up">
						<view class="notice" @click="noticeFun">
							<image src="/static/my/notice.png" mode="widthFix"></image>
							<view class="red_dot" v-if="megReadingStatus"></view>
						</view>
						<view class="set_up" @click="setUpFun">
							<image src="/static/my/set_up.png" mode="widthFix">
						</view>
					</view>
				</view>
				<view class="header_center" v-if="logoStatus">
					<view class="wallet ellipseHide">
						钱包地址：{{customer.chainAddress}}
					</view>
					<view class="wallet_img" @click="copy(customer.chainAddress)">
						<image src="/static/my/copy.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
            <view class="account_card" v-if="accountValueShow == 2">
                <view class="min_tit">
                    <text @click="handleSheye">神椰账户</text>
                    <image src="../../static/blindbox/right_w.png" mode=""></image>
                </view>
                <view class="num_box">
                    <view class="list">
                        <view class="num">{{customer.coin}}</view>
                        <view class="txt">
                            <image src="../../static/my/shenye_icon.png" mode=""></image>
                            <text>神椰CoCo</text>
                        </view>
                    </view>
                    <view class="xian"></view>
                    <view class="list">
                        <view class="num">{{customer.tPoint}}</view>
                        <view class="txt">
                            <image src="../../static/my/shenye_icon1.png" mode=""></image>
                            <text>通分</text>
                        </view>
                    </view>
                </view>
            </view>
            <view class="welfare_b">
                <view class="txt">
                    邀请好友  福利多多
                </view>
                <view class="btn" @click="invitation">
                    我的邀请码
                </view>
            </view>
			<view class="nav">
				<block v-for="(item,index) in navList" :key="item.id">
					<view class="nav_li" :class="{'mt19':index > 2}" v-if="item.status">
						<view class="disCent" @click="navFunc(item)">
							<view class="nav_img" >
								<image class="imgBox" :src="item.img" mode="widthFix"></image>
							</view>
							<view class="nav_word">{{item.name}}</view>
						</view>
					</view>
				</block>
			</view>

			<view class="section">
				<view class="section_title">
					<view class="sec_left">我的资产</view>
					<view class="sec_right" @click="mStatusFunc" v-if="logoStatus && jamList.length != 0">
						管理
					</view>
				</view>
                <view class="section_nav">
                    <view class="section_item"  v-for="(item,index) in sectionList" @click="clickIten(item)">
                        <view class="box" :class="{'on':functionType == item.id}">
                            {{item.value}}({{item.total}})
                        </view>
                    </view>
                </view>
                
                <block v-if="functionType == 2">
                    <view class="medal_b" >
                        <view class="medal_card" v-for="(item,index) in medalList" @click="equityCard(item,index)">
                            <image class="card_top" :src="item.cover" mode=""></image>
                            <view class="card_n">
                                {{item.cardName}}
                            </view>
                            <view class="card_bot">
                                <view class="left">
                                    <image src="../../static/my/suanli.png" mode=""></image>
                                    <text>算力:{{item.hashRate}}</text>
                                </view>
                                <view class="right">{{item.cardNum}}倍</view>
                            </view>
                        </view>
                    </view>
                </block>
                
				<block v-if="!logoStatus">
					<view class="section_logo">
						<text>登录查看我的数字权益</text>
						<navigator hover-class="none" url="/pages/login/login" class="logo_buttom">
							立即登录
						</navigator>
					</view>
				</block>
                
				<block v-if="functionType == 1">
                    <view class="interests_b">
                        <view class="list">
                            <text @click="handleActivation">激活权益：{{EquityNumData.useEquityNum}}</text>
                            <image src="../../static/my/rig_icon.png" mode=""></image>
                        </view>
                        <view class="list">
                            <text @click="handleCurrent" >当前权益：{{EquityNumData.currentEquityNum}}</text>
                            <image src="../../static/my/rig_icon.png" mode=""></image>
                        </view>
                    </view>
					<block v-if="jamList.length > 0">
                        <view class="section_li" v-for="(el,elindex) in jamList" :key="elindex"
                        	@click="equityCard(el,elindex)" v-if="jamList.length > 0">
                        	<view class="top_left">
                        		<image :src="el.merchantIcon?el.merchantIcon:'/static/index/card_item04.png'"
                        			mode="aspectFill"></image>
                        		<view class="top_left_word">
                        			<view class="left_box">
                        				<text class="top_left_word01">{{el.merchantName}}</text>
                        				<view class="top_left_number">{{el.cardNum}}张</view>
                        			</view>
                        			<view class="right_box">
                        				<view class="card_header_right">
                        					<text class="left_01">编号</text>
                        					<text class="left_02">{{el.cardNo}}</text>
                        				</view>
                        				<view class="expand-number" @click.stop="myOpen(el)">
                        					展开编号<image src="/static/newsImg/my_right.png"></image>
                        				</view>
                        			</view>
                        		</view>
                        	</view>
                        	<view class="section_li_box">
                        		<image class="imgBox" :src="el.cover"></image>
                        		<image class="imgBox2" :src="el.cover" mode="heightFix"></image>
                        		<view class="sec_li_info">
                        			<view class="info_top">
                        				<view class=""></view>
                        				<view class="top_right ellipseHide">
                        					持卡{{el.days}}天
                        				</view>
                        			</view>
                        			<view class="info_bottom ellipseHide" :style="{'background':el.color}">
                        				{{el.cardName}}
                        			</view>
                        		</view>
                        	</view>
                            <view class="sec_li_suan">
                                <view class="left">
                                    <image src="../../static/my/suanli.png" mode=""></image>
                                    <text>算力:{{el.hashRate}}</text>
                                </view>
                            </view>
                        </view>
                    </block>
                    
                    <block v-if="jamList.length == 0">
                    	<view class="section_logo card_voucher">
                    		<text>暂无卡包券</text>
                    		<navigator open-type="reLaunch" url="/pages/index/index" hover-class="none" class="logo_buttom">
                    			去购买卡券
                    		</navigator>
                    	</view>
                    </block>
				</block>
                <view class="section_button" :class="{'openClass':openStatus}" @click="openButton"
                    v-if="moreList.length > 1 && !mStatus">
                	<text>{{openName}}</text>
                	<image src="/static/my/up.png" mode="widthFix"></image>
                </view>
				
			</view>
			<view style="width: 100%;height: 200rpx;"></view>
		</block>
		<!-- 管理设置 -->
		<manage-sorting v-if="mStatus" :manData="moreList"></manage-sorting>

		<uni-popup ref="followLogin" type="dialog">
			<uni-popup-dialog mode="base" :confirmText="'去登录'" :title="'提示'" :content="'请先登录后进行关注'" :before-close="true"
				@close="followClose" @confirm="followConfirm"></uni-popup-dialog>
		</uni-popup>

		<uni-popup ref="popup" type="center" style="z-index:999;">
			<view class="popupBox">
				<view class="pTitle">{{equityTitle}}</view>
				<view class="pSubtitle">卡片编码</view>
				<view class="pListBox" v-if="equityIssueStatus == 1">
					<view class="pListBox_li">
						<view class="li_item">编号</view>
						<view class="li_item">我的权益</view>
					</view>
					<scroll-view scroll-y="true" class="scrollView">
						<block v-if="userList.length > 0">
							<view class="pListBox_li" v-for="(item,index) in userList" :key="index"
								@click="jumpEquityCard(item.id)">
								<view class="li_item colo_333333">{{item.cardNo}}</view>
								<view class="li_item colo_999999" :class="{'colo_333333':item.status == '已激活'}">
									{{item.status}}</view>
							</view>
						</block>
						<block v-else>
							<view class="pListBox_li"
								style="padding: 0 10rpx;width: 100%;display: flex;justify-content: center;">
								暂无数据
							</view>
						</block>
					</scroll-view>
				</view>
				<view class="pListBox" v-if="equityIssueStatus == 2" style="width: 256rpx;">
					<view class="pListBox_li">
						<view class="li_item" style="width: 100%; border: unset;">编号</view>
					</view>
					<scroll-view scroll-y="true" class="scrollView">
						<block v-if="userList.length > 0">
							<view class="pListBox_li" v-for="(item,index) in userList" :key="index"
								@click="jumpEquityCard(item.id)">
								<view class="li_item colo_333333" style="width: 100%; border: unset;">{{item.cardNo}}
								</view>
							</view>
						</block>
						<block v-else>
							<view class="pListBox_li"
								style="padding: 0 10rpx;width: 100%;display: flex;justify-content: center;">
								暂无数据
							</view>
						</block>
					</scroll-view>
				</view>

				<view class="know" @click="close">
					返回
				</view>
			</view>
		</uni-popup>
		<!--立即抢购弹窗  -->
		<rush-to-buy ref="rushToBuy"></rush-to-buy>
		<!-- 自定义tabBar -->
        <DetailDialog ref="pupop" :backColor="backColor" :title="dialogTitle" @confirm="handleConfirm">
            <view slot="one" v-if="pupopType == 'historyCode'" style='padding-bottom: 60rpx;'>
              <scroll-view scroll-y="true" class="historyScrollView" style="margin-top: 30rpx;">
                 <view class="codeNameBox" v-for="(item,index) in historyequityCard">
                      <view class="name">{{item.name}} </view>
                      <view class="conten">
                          <view class="text">{{item.code}}</view>
                          <image src="@/static/my/copy.png" mode="" @click="copy(item.code)"></image>
                      </view>
                 </view>
              </scroll-view>
            </view>
            <view slot="one" v-if="pupopType == 'currentCode'" style='padding-bottom: 60rpx;'>
              <scroll-view scroll-y="true" class="historyScrollView" style="margin-top: 30rpx;">
                 <view class="currenNameBox" v-for="(item,index) in currentequityCard">
                      <view class="head_b">
                          <view class="lf_t">{{item.cardName}}</view>
                          <view class="rg_t">x{{item.cardNum}}</view>
                      </view>
                      <view class="conten">{{item.name}}</view>
                 </view>
              </scroll-view>
            </view>
        </DetailDialog>
        <invitation-tasks ref="child"></invitation-tasks>
		<!-- 自定义tabBar -->
		<tabBar :pagePath="'/pages/my/my'" :num="2"></tabBar>
	</view>
</template>

<script>
	const app = getApp()
	import jweixin from '@/components/jweixin-module/jsdk'
	import wechat from '@/components/jweixin-module/wechat'
    import DetailDialog from './equity-card/components/DetailDialog.vue'
	import {getOperationConfiguration} from '@/api/api-v1-2.js'
	export default {
        components: {
          DetailDialog,
        },
		data() {
			return {
                dialogTitle: '我的权益码',
                pupopType: 'historyCode',
                backColor: 'linear-gradient(180deg, #EFE0FF 0%, #E1E9FF 10.79%,#FFFFFF 100%)',
                accountValueShow: '',
                functionType: 2,
				wxOpenTags: '',
				path: '',
				customer: {}, //用户信息
                 sectionList: [
                    {id: 2,value: '勋章墙',total: 0},
                    {id: 1,value: '权益NFR',total: 0}
                 ],
				navList: [{
						id: 1,
						img: '/static/my/nav_01.png',
						name: '我的订单',
						url: '/pages/my/order/order',
						status:true,
					},
					{
						id: 2,
						img: '/static/my/nav_02.png',
						name: '我的关注',
						url: '/pages/my/follow/follow',
						status:true,
					},
					{
						id: 3,
						img: '/static/my/nav_03.png',
						name: '区块链信息查询',
						url: '/pages/my/blockchain/blockchain',
						status:true,
					},
					{
						id: 4,
						img: '/static/my/nav_04.png',
						name: '联系客服',
						url: '/pages/my/customer-service/customer-service',
						status:true,
					},
					{
						id: 5,
						img: '/static/newsImg/NFR.png',
						name: 'NFR记录',
						url: '/pages/my/NFR-record/NFR-record',
						status:false,
					},
					{
						id: 6,
						img: '/static/newsImg/shoppingBag.png',
						name: '神椰集市',
						url: '/pages/my/shenye-market/shenye-market',
						status:false,
					},

				],
                medalList: [],//勋章墙列表
				jamList: [],
				codeNum: '',
				weappStatus: false, //
				megReadingStatus: false,
				// aloneList: [],
				userList: [],
				moreList: [],
				openStatus: false,
				openName: '展开',
				logoStatus: false, //判断是否登录
				mStatus: false, //是否处于编辑状态
				equityTitle: '', //卡标题
				donationShow: null, //记录按钮 1不显示 2显示
				equityIssueStatus: 1, //1开始 2 关闭
				// isRealName:
                EquityNumData: {},
                historyequityCard: [],//历史权益卡
                currentequityCard: [],//当前权益卡
			}
		},
		onReady() {

		},
		onLoad(e) {
			// var _this = this

			// this.share()
			// this.payment()

			// this.aloneList.push(this.jamList[0])
			// this.moreList = this.jamList;  //深拷贝
			// this.jamList = this.aloneList
		},
		mounted() {
           
        },
		onShow() {
			if (this.$queue.getData('token') != undefined) {
				this.logoStatus = true
				this.getCustomer() //用户信息
				this.getUnreadHas() //用户是否已读消息
				this.confirmInfo() //初始化卡包卷状态
                this.getNum()
                this.getEquityNum() 
                this.getCurrentEquity()
                this.getHistoryCardNoListByCustomer()
				// 判定子组件是否全部挂在
				this.$nextTick(() => {
					this.$refs.rushToBuy.open()
				})
			} else {
				this.logoStatus = false
			}
			this.getDonationShow()
           
            
		},
		methods: {
            //权益数量
            async getEquityNum(){
                var res = await this.$api.getEquityNum()
                this.EquityNumData = res.result
            },
            //激活权益弹窗
            async handleActivation(){
                this.$refs['pupop'].open()
                this.pupopType = 'historyCode'
                this.dialogTitle = '我的权益码'
                
            },
            async getHistoryCardNoListByCustomer(){
                var res = await this.$api.getHistoryCardNoListByCustomer()
                this.historyequityCard = res.result
            },
            async getCurrentEquity(){
                var res = await this.$api.getCurrentEquity()
                this.currentequityCard = res.result
            },
            //当前权益弹窗
            handleCurrent(){
                this.$refs['pupop'].open()
                this.pupopType = 'currentCode'
                this.dialogTitle = '当前权益'
            },
            //获取数量
            async getNum(){
                var res = await this.$api.getCustomerCardFunctionType()
                this.sectionList[0].total = res.result.medalNFR
                this.sectionList[1].total = res.result.equityNFR
            },
			// 前端NFR记录按钮 1不显示 2显示
			async getDonationShow() {
				var res = await getOperationConfiguration()

				var el = res.result
                this.accountValueShow = el.accountValue
				// NFR记录是否显示 1不显示 2显示
				if(el.nfrValue == 2) {
					this.navList[4].status = true
				}else{
					this.navList[4].status = false
				}
				// 神椰集市是否显示 1不显示 2显示
				if(el.commodityValue == 2) {
					 this.navList[5].status = true
				}else{
					 this.navList[5].status = false
				}
                    
			},
			async myOpen(item) {
				var data = {
					equityCardId: item.id
				}
				this.equityTitle = item.cardName
				this.equityIssueStatus = item.equityIssueStatus
				var res = await this.$api.getCardNoList(data)
				this.userList = res.result
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			// 获取卡包卷
			getCustomerCardList() {
                var data = {
                    functionType: this.functionType
                }
				this.$api.getCustomerCardList(data).then(res => {
					var resdata = res.result
					if (resdata.length > 0) {
						this.moreList = res.result
                        if(this.functionType == 1){
                            this.jamList = []
                            this.jamList.push(this.moreList[0]) //收缩
                        }else if(this.functionType == 2){
                            this.medalList = []
                            if(this.moreList.length > 1){
                                this.medalList.push(this.moreList[0]) //收缩
                                this.medalList.push(this.moreList[1])
                            }else{
                                this.medalList.push(this.moreList[0]) //收缩
                            }
                            
                        }
						// this.$nextTick(() => {
						// 	const query = uni.createSelectorQuery().in(this);
						// 	query.select(".section_li").boundingClientRect((data) => {
						// 		this.scrollH = data.height;
						// 	}).exec();
						// })
					}
				})
			},
			// 复制
			copy(text) {
				if (text != '') {
					var _this = this
					_this.$copyText(text).then(
						res => {
							uni.showToast({
								title: '复制成功',
								icon: 'none'
							})
						}
					)
				}

			},
			// 获取消息
			getUnreadHas() {
				this.$api.getUnreadHas().then(res => {
					this.megReadingStatus = res.data
				})
			},
			// 获取用户信息
			async getCustomer() {
				var res = await this.$api.getCustomer()
				this.customer = res.data
			},
			// 展开/收起 卡卷
			openButton() {
				this.openStatus = !this.openStatus
				if (this.openStatus) {
					this.openName = '收起'
                    if(this.functionType == 1){
                        this.jamList = this.moreList
                    }else if(this.functionType == 2){
                        this.medalList = this.moreList
                    }
					console.log(' this.medalList', this.medalList)
				} else {
					this.openName = '展开'
                    if(this.functionType == 1){
                        this.jamList = []
                        this.jamList.push(this.moreList[0])
                    }else if(this.functionType == 2){
                        this.medalList = []
                        this.medalList.push(this.moreList[0])
                        this.medalList.push(this.moreList[1])
                    }
					
				}
			},
			// 转跳
			navFunc(item) {
				if (item.id == 3) {
					window.location.href = 'https://ddc.bsnbase.com/main/ddc-querys/query'
				} else if (item.url != '') {
					uni.navigateTo({
						url: item.url
					})
				}
			},
			// 消息
			noticeFun() {
				uni.navigateTo({
					url: '/pages/my/news/news'
				})
			},
			// 转跳设置
			setUpFun() {
				uni.navigateTo({
					url: '/pages/my/set-up/set-up'
				})
			},
			equityCard(el, index) {
				this.jumpEquityCard(el.customerCardId)
			},
			jumpEquityCard(id) {
				this.close()
				uni.navigateTo({
					url: '/pages/my/equity-card/equity-card?id=' + id
				})
			},
			mStatusFunc() {
				this.mStatus = true //是否处于编辑状态
			},
			// 初始化状态
			confirmInfo() {
				this.openName = '展开'
				this.openStatus = false
				this.sectionIndex = null
				// this.mText = '管理'
				this.mStatus = false
                this.moreList = []
				this.getCustomerCardList()
			},
            clickIten(item){
            	this.functionType = item.id
                this.confirmInfo()
            },
            handleSheye(){
                uni.navigateTo({
                    url: '/pages/my/shenye-coin/shenye-coin'
                })
            },
            //打开邀请码
            invitation() {
            	this.$refs.child.open();
            },
		}
	}
</script>

<style scoped>
	page {
		height: 100%;
	}

	.opacityClass {
		opacity: .5;
	}

	.disCent {
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.imgBox {
		width: 100%;
		height: 100%;
	}

	.unsetBo {
		border: unset !important;
	}

	.my {
		width: 750rpx;
		min-height: 100%;
		background: url(/static/my/my_background.png) no-repeat;
		background-size: 100% 100%;
		/* padding-bottom: 180rpx; */
	}

	.my_header {
		width: 750rpx;
		height: auto;
		padding: 32rpx 40rpx;
		box-sizing: border-box;

	}

	.header_top {
		display: flex;
		flex-direction: row;
		position: relative;
	}

	.header_logo image,
	.header_set_up image {
		width: 100%;
		height: 100%;
	}

	.header_logo {
		position: relative;
		width: 128rpx;
		height: 128rpx;
	}

	.header_logo .logo {
		width: 124rpx;
		height: 124rpx;
		border: 4rpx solid #ECF9FF;
		border-radius: 100%;
	}

	.header_logo .logo image {
		border-radius: 50%;
	}

	.header_logo .grade {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: -22rpx;
		width: 120rpx;
		height: 40rpx;
	}

	.header_name {
		width: 370rpx;
		margin-left: 18rpx;
		display: flex;
		align-items: flex-start;
		justify-content: center;
		flex-direction: column;
	}

	.header_name .name {
		font-weight: 400;
		font-size: 32rpx;
		color: #000000;
		margin-bottom: 12rpx;
		display: flex;
		flex-direction: row;
	}

	.header_name .name .name_text {
		max-width: 240rpx;
		font-size: 36rpx;
		font-weight: 400;
	}

	.header_name .name .real_name {
		display: inline-flex;
		background: linear-gradient(180deg, #71B6F7 0%, #2D99FF 100%);
		border-radius: 21rpx;
		padding: 4rpx 12rpx;
		font-size: 20rpx;
		color: #FFFFFF;
		margin-left: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.header_name .shenye-coin {
		font-weight: 400;
		font-size: 28rpx;
		color: #000000;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.header_name .shenye-coin image {
		width: 38rpx;
		height: 38rpx;
		margin-right: 12rpx;
	}

	.header_name .shenye-coin .h_image_02 {
		width: 10rpx;
		height: 18rpx;
		margin-left: 12rpx;
	}

	.header_name .shenye-coin .index_next {
		width: 10rpx;
		height: 18rpx;
	}

	.header_set_up {
		display: flex;
		flex-direction: row;
		position: absolute;
		right: 0;
	}

	.header_set_up .notice {
		margin-right: 40rpx;
		position: relative;
	}

	.header_set_up .notice .red_dot {
		position: absolute;
		width: 16rpx;
		height: 16rpx;
		background: #EE3225;
		border-radius: 100%;
		right: 0;
		top: -4rpx;
	}

	.header_set_up .notice,
	.header_set_up .set_up {
		width: 44rpx;
		height: 44rpx;
	}

	/* 钱包地址 */
	.header_center {
		color: #000000;
		font-size: 28rpx;
		margin-top: 26rpx;
		display: flex;
		flex-direction: row;
	}

	.header_center .wallet {
		width: 550rpx;
		word-break: break-all;
	}

	.header_center .wallet_img {
		width: 32rpx;
		height: 30rpx;
		margin-left: 10rpx;
	}

	.header_center .wallet_img image {
		width: 100%;
		height: 100%;
	}


	/* nav */
	.nav {
		width: 686rpx;
		background: #FFFFFF;
		box-shadow: 4rpx 4rpx 12rpx #EEEEEE;
		border-radius: 32rpx;
		padding: 32rpx 24rpx;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		margin: 0 auto;
		margin-top: 20rpx;
	}

	.nav .nav_li {
		width: calc(100% / 3);
		font-size: 24rpx;
		text-align: center;
		color: #202731;
		display: flex;
		align-items: center;
		flex-direction: column
	}
	.mt19 {
		margin-top: 38rpx;
	}
	.nav .nav_li .nav_img {
		width: 56rpx;
		height: 56rpx;
		margin-bottom: 16rpx;

	}
    .nav .nav_li .nav_img2{
		width: 56rpx;
		height: 56rpx;
	}
	/* 我的卡包券 */
	.section {
		width: 686rpx;
		margin: 0 auto;
		margin-top: 18rpx;
		box-sizing: border-box;
	}

	.section_title {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 22rpx;
		padding: 0 24rpx;
		padding-top: 18rpx;
	}

	.sec_left {
		font-size: 34rpx;
		line-height: 44rpx;
		color: #000000;
	}

	.sec_right {
		font-weight: 400;
		font-size: 30rpx;
		color: #1557F2;

	}

	.section_button {
		font-size: 28rpx;
		color: #0B87F2;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 200rpx;
		height: 68rpx;
		background: #FFFFFF;
		box-shadow: 0px 8rpx 8rpx #F3F3F3;
		border-radius: 200rpx;
		margin: 0 auto;
	}

	.section_button image {
		width: 28rpx;
		height: 16rpx;
		margin-left: 4rpx;
		margin-top: 4rpx;
		transform: rotate(180deg);
		/* transition: all 0.2s; */
	}

	.openClass image {
		transform: rotate(0deg);
		transition: all 0.2s;
	}

	.section_li {
		padding: 30rpx 24rpx;
		box-sizing: border-box;
		width: 100%;
		border-radius: 32rpx;
		margin-bottom: 30rpx;
		background: #FFFFFF;
		box-shadow: 4rpx 4rpx 12rpx #EEEEEE;
	}

	.section_li_box {
		position: relative;
		width: 100%;
		height: 314rpx;
		background-repeat: no-repeat;
		background-size: cover;

		border-radius: 24rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
	}

	.section_li .imgBox {
		filter: blur(5px);
		width: 100%;
		height: 314rpx;

		/* border-radius: 24rpx; */
	}

	.imgBox2 {
		height: 100%;
		position: absolute;
		z-index: 2;
	}

	.section_li .sec_li_info {
		position: absolute;
		top: 0;
		width: 100%;
		height: 314rpx;
		z-index: 3;
		border-radius: 24rpx;
	}

	.info_top {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-top: 24rpx;
	}

	.top_left {
		/* padding-left: 24rpx; */
		display: flex;
		flex-direction: row;
		font-size: 26rpx;
		color: #000000;
		margin-bottom: 26rpx;

	}

	.top_left image {
		width: 68rpx;
		height: 68rpx;
		margin-right: 22rpx;
		border-radius: 50%;
	}

	.top_left .top_left_word {
		display: flex;
		flex-direction: column;
	}

	.right_box,
	.left_box {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.left_box {
		width: 540rpx;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}

	.top_left_number {
		border: 2rpx solid #F1C984;
		border-radius: 200rpx;
		padding: 0 20rpx;
		font-size: 24rpx;
		color: #CD8200;
	}

	.right_box .expand-number {
		font-size: 24rpx;
		color: #1557F2;
		margin-left: 16rpx;
	}

	.expand-number image {
		width: 10rpx;
		height: 18rpx;
		margin-left: 4rpx;
	}

	.top_left_word .top_left_word02 {
		font-size: 22rpx;
	}

	.top_right {
		align-self: baseline;
		padding: 4rpx 18rpx;
		font-size: 21rpx;
		color: #FFFFFF;
		background: rgba(0, 0, 0, .3);
		border-radius: 200rpx 0px 0px 200rpx;
	}

	.info_bottom {
		position: absolute;
		width: 100%;
		bottom: 0;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.53) 58.82%);
		border-radius: 0px 0px 24rpx 24rpx;
		font-size: 26rpx;
		line-height: 36rpx;
		color: #FFFFFF;
		padding: 18rpx 24rpx;
		box-sizing: border-box;
	}

	.section_logo {
		width: 100%;
		height: 210rpx;
		background: #FFFFFF;
		font-size: 28rpx;
		color: #000000;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 46rpx;
		box-sizing: border-box;
	}

	.logo_buttom {
		width: 200rpx;
		height: 64rpx;
		background: linear-gradient(90deg, #0B87F2 0%, #6752EA 100%);
		border-radius: 12rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		text-align: center;
		line-height: 64rpx;
		margin-top: 20rpx;
	}

	.card_voucher {
		color: #999999;
	}

	/* 排序提示 */
	.forward {
		position: fixed;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		top: 0;
		z-index: 999;
		padding-top: 40rpx;
	}

	.forward .know {
		width: 172rpx;
		height: 64rpx;
		border: 2rpx solid #FFFFFF;
		border-radius: 200rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		text-align: center;
		line-height: 64rpx;
		float: right;
		margin-right: 40rpx;
	}

	.mContent {
		margin-top: 100rpx;
	}

	.title {
		width: 100%;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
	}

	.cImg {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin-bottom: 40rpx;
	}

	.cImg .cImg01 {
		width: 120rpx;
		height: 192rpx;
	}

	.cImg .cImg02 {
		width: 92rpx;
		height: 112rpx;
		margin: 0 68rpx;
	}

	.imgCenter {
		width: 630rpx;
		height: 436rpx;
		margin: 0 auto;
		border-radius: 32rpx;
		overflow: hidden;
	}

	.mList {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		margin-top: 20rpx;
		margin-right: 40rpx;
	}

	.mList .mListItem {
		font-size: 34rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		color: #FFFFFF;
	}

	.mList .mListItem image {
		width: 120rpx;
		height: 120rpx;
		margin-left: 40rpx;
	}

	.mListFixt {
		position: fixed;
		z-index: 99;
		right: -20rpx;
		bottom: 300rpx;
	}

	.section_no_check {
		opacity: .5;
		transform: scale(0.9);
	}

	.section_check {
		opacity: 1;
		transform: scale(1);
	}

	/*  */
	.card_header_right {
		display: flex;
		flex-direction: row;
		margin-top: 6rpx;
	}

	.card_header_right text {
		padding: 0 14rpx;
		font-weight: 400;
		font-size: 22rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		/* line-height: 34rpx; */
	}

	.card_header_right .left_01 {
		color: #824806;
		background: linear-gradient(90deg, #F0C57D 3.45%, #F8E2B1 100%);
		border-radius: 4rpx 0 0 4rpx;
	}

	.card_header_right .left_02 {
		color: #CB7F00;
		border: 1rpx solid #F1C67F;
		border-radius: 0px 4rpx 4rpx 0px;
	}

	/* end */

	/* 弹窗样式 */
	.popupBox {
		width: 612rpx;
		background: #fff url('@/static/newsImg/my_number_bg.jpg') no-repeat;
		background-size: 100% auto;
		border-radius: 16rpx;
		padding-bottom: 44rpx;
	}

	.popupBox .pTitle {
		padding-top: 50rpx;
		text-align: center;
		width: 100%;
		font-size: 36rpx;
		color: #222222;
	}

	.popupBox .pSubtitle {
		font-size: 30rpx;
		color: #222222;
		text-align: center;
		width: 100%;
		margin-top: 14rpx;
		margin-bottom: 34rpx;
	}

	.scrollView {
		width: 100%;
		margin: 0 auto;
		max-height: 640rpx;
	}

	.popupBox .pListBox {
		width: 512rpx;
		max-height: 724rpx;
		overflow: hidden;
		margin: 0 auto;
		border: 1rpx solid #E6E6E6;
	}

	.popupBox .pListBox .pListBox_li {
		width: 100%;
		display: flex;
		flex-direction: row;
		border-bottom: 1rpx solid #E5E5E5;
		color: #333333;
		font-size: 28rpx;
	}

	.popupBox .pListBox .pListBox_li .li_item:first-child {
		border-right: 1rpx solid #E5E5E5;
	}

	.popupBox .pListBox .pListBox_li:first-child {
		font-size: 30rpx;
		color: #222222;
	}

	.popupBox .pListBox .pListBox_li:last-child {
		border-bottom: unset;
	}

	.popupBox .pListBox .pListBox_li .li_item {
		width: 50%;
		height: 64rpx;
		color: #222222;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.colo_333333 {
		color: #333333 !important;
	}

	.colo_999999 {
		color: #999999 !important;
	}

	.popupBox .know {
		width: 200rpx;
		height: 72rpx;
		margin: 0 auto;
		margin-top: 40rpx;
		border-radius: 8px;
		border: 2rpx solid #0B87F2;
		line-height: 72rpx;
		font-size: 30rpx;
		text-align: center;
		background: linear-gradient(90deg, #0B87F2 0%, #6752EA 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		text-fill-color: transparent;
	}
    .account_card{
        width: 690rpx;
        margin: 30rpx 30rpx 0 30rpx;
        height: 250rpx;
        border-radius: 32rpx;
        background-image:  url('@/static/my/account_bg.png');
        background-size: 100%;
    }
    .account_card .min_tit{
        padding: 24rpx 0 0 26rpx;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .account_card .min_tit text{
        font-size: 32rpx;
        color: #fff;
    }
    .account_card .min_tit image{
        width: 14rpx;
        height: 24rpx;
        margin-left: 8rpx;
    }
    .account_card .num_box{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 18rpx;
    }
    .account_card .num_box .xian{
        width: 1rpx;
        height: 100rpx;
        background: #8D88FF;
    }
    .account_card .num_box .list{
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .account_card .num_box .list .num{
        font-size: 48rpx;
        color: #fff;
        height: 84rpx;
        line-height: 84rpx;
        font-weight: 700;
    }
    .account_card .num_box .list .txt{
        margin-top: 4rpx;
        display: flex;
        align-items: center;
    }
    .account_card .num_box .list .txt image{
        width: 32rpx;
        height: 32rpx;
    }
    .account_card .num_box .list .txt text{
        font-size: 28rpx;
        color: #fff;
        margin-left: 8rpx;
    }
    .welfare_b{
        width: 704rpx;
        height: 128rpx;
        background-image: url('@/static/my/welfare_bg.png');
        background-size: 100%;
        margin: 30rpx auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        
    }
    .welfare_b .txt{
        height: 128rpx;
        line-height: 128rpx;
        padding-left: 144rpx;
        font-size: 40rpx;
        color: #fff;
        font-weight: 700;
    }
    .welfare_b  .btn{
        width: 190rpx;
        height: 64rpx;
        text-align: center;
        line-height: 64rpx;
        color: #F0250D;
        background: linear-gradient(90deg, #FFE500 2.81%, #FFC700 96.63%);
        box-shadow: 0px 3px 0px #E64227;
        border-radius: 100px;
        margin-right: 18rpx;
    }
    .section_nav{
    	height: 132rpx;
    	padding: 0 20rpx;
    	box-sizing: border-box;
    	display: flex;
    	align-items: center;
    	justify-content: space-between;
    }
    .section_item{
        flex: 1;
        display: flex;
        justify-content: center;
    }
    .section_item .on{
    	font-size: 36rpx !important;
    	color: #222222 !important;
        font-weight: 500;
    	background-image: url('@/static/index/index-yuan.png');
    	background-repeat: no-repeat;
    	background-size: 48rpx 42rpx;
    	background-position: 8px 34rpx;
    }
    .section_item .box{
        font-size: 34rpx;
        color: rgba(51, 51, 51, .8);
        height: 132rpx;
        line-height: 132rpx;
        padding: 0 20rpx;
    }
    .interests_b{
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fff;
        height: 68rpx;
        padding: 0 22rpx;
        margin-bottom: 30rpx;
        border-radius: 8rpx;
    }
    .interests_b .list{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        
    }
    .interests_b .list text{
        font-size: 30rpx;
        color: #222;
    }
    .interests_b .list image{
        width: 10rpx;
        height: 18rpx;
        margin-left: 6rpx;
    }
    .medal_b{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .medal_card{
        width: 330rpx;
        height: 426rpx;
        display: flex;
        flex-direction: column;
        background: #fff;
        margin-bottom: 20rpx;
        border-radius: 14rpx;
    }
    .card_top{
        width: 290rpx;
        height: 262rpx;
        margin: 30rpx auto;
    }
    .card_n{
        font-size: 30rpx;
        color: #222;
        padding: 0 28rpx;
    }
    .card_bot{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 28rpx;
        margin-top: 14rpx;
    }
    .card_bot .left image{
        width: 42rpx;
        height: 34rpx;
    }
    .card_bot .left text{
        font-size: 28rpx;
        column-rule-color: #222;
        margin-left: 6rpx;
    }
    .card_bot .right{
        height: 34rpx;
        padding: 0 18rpx;
        font-size: 24rpx;
        line-height: 34rpx;
        border: 1rpx solid #C4C4C4;
        border-radius: 30rpx;
    }
    .historyScrollView{
        max-height: 600rpx;
    }
    /deep/ .historyScrollView ::-webkit-scrollbar{
    	display: none;
    }
    .codeNameBox{
        margin: 0 24rpx 30rpx 24rpx;
        background: #fff;
        padding: 24rpx;
        border-radius: 20rpx;
        box-shadow: 0px 0px 8px #EAEAEA;
    }
    .codeNameBox .name{
        font-size: 30rpx;
        color: #222;
    }
    .codeNameBox .conten{
        display: flex;
        justify-content: space-between;
    }
    .codeNameBox .conten .text{
        width: 380rpx;
        color: #333;
        word-break:break-all;  
        word-wrap:break-word;  
    }
    .codeNameBox .conten image{
        width: 34rpx;
        height: 36rpx;
    }
    .currenNameBox{
        margin: 0 24rpx 30rpx 24rpx;
        background: #fff;
        padding: 24rpx;
        border-radius: 20rpx;
        box-shadow: 0px 0px 8px #EAEAEA;
    }
    .currenNameBox .head_b{
        display: flex;
        justify-content: space-between;
        font-size: 30rpx;
        color: #222;
    }
   .currenNameBox .conten{
       font-size: 28rpx;
       color: #666;
       margin-top: 14rpx;
   }
   .sec_li_suan{
       display: flex;
       justify-content: space-between;
       align-items: center;
       
       margin-top: 28rpx;
   }
   .sec_li_suan .left image{
       width: 42rpx;
       height: 34rpx;
   }
   .sec_li_suan .left text{
       font-size: 28rpx;
       column-rule-color: #222;
       margin-left: 6rpx;
   }
	/* end */
</style>
